<template>
    <div class="container-box">
        <div class="charts-date-type">
            <date-picker 
                @getData="getData" 
                :dateDataType="dateDataType" 
                :date_interval="date_interval" 
                :now_day="false" 
                size="small" 
                date_min="2021-08-22">
                <template v-slot:left="scope">
                    <el-radio-group 
                        class="type-radio-group"
                        v-model="is_accumulate" 
                        size="small" 
                        @change="handleTypeChange(scope)">
                        <el-radio-button label="0">日趋势</el-radio-button>
                        <el-radio-button label="1">累计量</el-radio-button>
                    </el-radio-group>
                </template>
            </date-picker>
        </div>
        <div class="charts-container">
            <el-row>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[0].label}}</div>
                            <router-link class="charts-more" 
                                v-if="admin_is_super == 1 || admin_id == 190" 
                                :to="{path: 'details', query: {data_type: dataTypeArr[0].value, data_label: dataTypeArr[0].label}/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div class="charts-content">
                            <charts :dataArr="dataArr" :showParticleSize="showParticleSize" container="c1" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[1].label}}</div>
                            <router-link class="charts-more" 
                                v-if="admin_is_super == 1 || admin_id == 190" 
                                :to="{path: 'details', query: {data_type: dataTypeArr[1].value, data_label: dataTypeArr[1].label}/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div class="charts-content">
                            <charts :dataArr="dataArr2" :showParticleSize="showParticleSize" container="c2" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[8].label}}</div>
                            <router-link class="charts-more" 
                                v-if="admin_is_super == 1 || admin_id == 190" 
                                :to="{path: 'details', query: {data_type: dataTypeArr[8].value, data_label: dataTypeArr[8].label}/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div class="charts-content">
                            <charts :dataArr="dataArr10" :showParticleSize="showParticleSize" container="c10" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[2].label}}</div>
                            <router-link class="charts-more" 
                                v-if="admin_is_super == 1 || admin_id == 190" 
                                :to="{path: 'details', query: {data_type: dataTypeArr[2].value, data_label: dataTypeArr[2].label}/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div class="charts-content charts-bar">
                            <charts-bar :dataArr="dataArr3" :showParticleSize="showParticleSize" container="c3" :hasType="false"></charts-bar>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[7].label}}</div>
                            <router-link class="charts-more" 
                                v-if="admin_is_super == 1 || admin_id == 190" 
                                :to="{path: 'details', query: {data_type: dataTypeArr[7].value, data_label: dataTypeArr[7].label}/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div class="charts-content">
                            <charts :dataArr="dataArr9" :showParticleSize="showParticleSize" container="c9" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[4].label}}</div>
                            <router-link class="charts-more" 
                                v-if="admin_is_super == 1 || admin_id == 190" 
                                :to="{path: 'details', query: {data_type: dataTypeArr[4].value, data_label: dataTypeArr[4].label}/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div class="charts-content">
                            <charts :dataArr="dataArr5" :showParticleSize="showParticleSize" container="c5" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[3].label}}</div>
                            <router-link class="charts-more" 
                                v-if="admin_is_super == 1 || admin_id == 190" 
                                :to="{path: 'details', query: {data_type: dataTypeArr[3].value, data_label: dataTypeArr[3].label}/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div class="charts-content charts-bar">
                            <charts-bar :dataArr="dataArr4" :showParticleSize="showParticleSize" container="c4" :hasType="false"></charts-bar>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[6].label}}</div>
                            <el-radio-group 
                                class="charts-radio-group"
                                v-model="dataTypeArr[6].data_type"
                                @change="handleRadioChange"
                                size="small">
                                <el-radio-button label="4">兑换量</el-radio-button>
                                <el-radio-button label="5">累计金额</el-radio-button>
                            </el-radio-group>
                            <router-link class="charts-more" 
                                v-if="admin_is_super == 1 || admin_id == 190" 
                                :to="{path: 'details', query: {data_type: dataTypeArr[6].value + '_' + dataTypeArr[6].data_type, data_label: dataTypeArr[6].labels['s'+dataTypeArr[6].data_type], is_valid: 1}/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div :class="{'charts-content': true, 'charts-bar': true, vis1: true, visible: dataTypeArr[6].data_type == 4}">
                            <charts-bar :dataArr="dataArr7" :showParticleSize="showParticleSize" container="c7" :hasType="false"></charts-bar>
                        </div>
                        <div :class="{'charts-content': true, vis1: true, visible: dataTypeArr[6].data_type == 5}">
                            <charts :dataArr="dataArr8" :showParticleSize="showParticleSize" container="c8" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[5].label}}</div>
                            <router-link class="charts-more" 
                                v-if="admin_is_super == 1 || admin_id == 190" 
                                :to="{path: 'details', query: {data_type: dataTypeArr[5].value, data_label: dataTypeArr[5].label}/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div class="charts-content">
                            <charts :dataArr="dataArr6" :showParticleSize="showParticleSize" container="c6" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[9].label}}</div>
                        </div>
                        <div class="charts-content charts-bar">
                            <charts-bar :dataArr="dataArr11" :showParticleSize="showParticleSize" container="c11" :hasType="false"></charts-bar>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import datePicker from '../datePicker.vue';
import charts from '../charts.vue';
import chartsBar from '../charts-bar.vue';
import { formatterNumber, getChartMin } from '@/common/js/util.js'
// import '@/common/scss/charts-public.scss'
export default {
    data() {
        return {
            is_accumulate: '0',
            dataTypeArr: [
                {label: '预约保养', value: 1, valueSuffix: ' 次'},
                {label: '新车团购', value: 2, valueSuffix: ' 次'},
                {label: '特价车', value: 3, valueSuffix: ' 次'},
                {label: '二手车评估', value: 4, valueSuffix: ' 次'},
                {label: '底价咨询', value: 5, valueSuffix: ' 次'},
                {label: '救援发起', value: 6, valueSuffix: ' 次'},
                {label: '商城订单', labels: {s4: '兑换量', s5: '累计金额'}, value: 7, valueSuffix: {s4: ' 单', s5: ' 元'}, data_type: 4},
                {label: '售后团购', value: 8, valueSuffix: ' 次'},
                {label: '预约试驾', value: 9, children: [
                    {label: '预约量', value: 1, valueSuffix: ' 次'},
                    {label: '到店人数', value: 2, valueSuffix: ' 人'}
                ]},
                {label: '救援评价', value: 10, children: [
                    {label: '访问量', value: 1, valueSuffix: ' 人'},
                    {label: '评价量', value: 2, valueSuffix: ' 人'}
                ]},
            ],
            showParticleSize: false,   // 粒度控件
            searchContent: {
                data_type: 4,  // 类型，默认访问次数
            },
            dataArr: {
                series:  []
            },
            dataArr2: {
                series:  []
            },
            dataArr3: {
                type: 'column',
                xAxis: {
                    lineWidth: 1,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 1,
                    tickAmount: 6,
                },
                plotOptions: {
                    column: {
                        borderRadius: 2,
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, '#FCC0F8'],
                                [1, '#4293F4']
                            ]
                        }
                    }
                },
                init: true, // true 表示每次加载都重新初始化
                series: []
            },
            dataArr4: {
                type: 'column',
                xAxis: {
                    lineWidth: 1,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 1,
                    tickAmount: 6,
                },
                plotOptions: {
                    column: {
                        borderRadius: 2,
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, '#65E3C3'],
                                [1, '#4293F4']
                            ],
                        },
                    }
                },
                init: true,
                series: []
            },
            dataArr5: {
                series:  []
            },
            dataArr6: {
                series:  []
            },
            dataArr7: {
                /*xAxis: {
                    labels: {
                        y: null,
                        style: {
                            fontSize: '11'
                        }
                    }
                },
                yAxis: {
                    labels: {
                        y: 22
                    }
                },
                formatter(total) {
                    return formatterNumber(this.y, 10000, 2, true) + '单' + ' (' + (total > 0 && (this.y * 100 / total).toFixed(2) || '0') + '%)'; // 格式化
                },
                labelFormat: 'MM-DD',*/
                type: 'column',
                xAxis: {
                    lineWidth: 1,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 1,
                    tickAmount: 6,
                },
                //formatter(total) {
                //    return formatterNumber(this.y, 10000, 2, true) + '人' + ' (' + (total > 0 && (this.y * 100 / total).toFixed(2) || '0') + '%)'; // 格式化
                //},
                // labelFormat: 'MM-DD',
                init: true,
                series: []
            },
            dataArr8: {
                series:  []
            },
            dataArr9: {
                series:  []
            },
            dataArr10: {
                series:  []
            },
            dataArr11: {
                type: 'column',
                xAxis: {
                    lineWidth: 1,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 1,
                    tickAmount: 6,
                },
                plotOptions: {
                    column: {
                        borderRadius: 2,
                        // pointWidth: 30,
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, '#65E3C3'],
                                [1, '#4293F4']
                            ],
                        },
                    }
                },
                init: true,
                series:  []
            },
            dateDataType: null,
            date_interval: [],
            admin_is_super: 0,
            admin_id: 0
        }
    },
    components: { datePicker, charts, chartsBar },
    beforeRouteEnter (to, from, next) {
        if(to.params.data_type) {

        }
        next();
    },
    created() {
        this.admin_is_super = this.$store.getters["user_info"].admin_is_super
        this.admin_id = this.$store.getters["user_info"].admin_id
        const data_type = this.$route.params.data_type;
        if(data_type) {
            this.searchContent.data_type = data_type;
            this.dateInterval = this.$route.params.dateInterval;
        }
    },
    methods: {
        handleChange() {
            this.getData()
        },
        handleTypeChange(scope) {
            this.getData(scope.date)
        },
        getData(dateInterval = null) {
            // 请求参数
            let datas = { is_accumulate: this.is_accumulate }
            if(this.dateInterval) {
                dateInterval = this.dateInterval;

                // 更新日期选中值 
                const startDate = Date.parse(dateInterval[0]);
                const endDate = Date.parse(dateInterval[1]);
                const diff_days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
                if(diff_days <= 7) {
                    this.dateDataType = "visit_date_7"
                } else if(diff_days <= 30) {
                    this.dateDataType = "visit_date_30"
                } else {
                    this.dateDataType = "visit_date_custom"
                }
                this.date_interval = dateInterval;
                this.dateInterval = null;
            }

            if(dateInterval) {
                datas.begin_date = dateInterval[0];
                datas.end_date = dateInterval[1];
                this.date_interval = dateInterval;
            }
            // 预约保养
            const datas1 = {...datas, data_type: 1}
            this.handleRequest2(datas1, res => {
                const data_type = 1
                this.dataArr = {
                    tooltip: {
                        valueSuffix: this.dataTypeArr.find(type => type.value == data_type).valueSuffix
                    },
                    series: [{
                        name: this.getType(data_type),
                        color: '#2FD2A6',
		                data: res.data || []
                    }]
                }
            })
            // 新车团购
            const datas2 = {...datas, data_type: 2}
            this.handleRequest1(datas2, res => {
                const data_type = 2
                this.dataArr2 = {
                    tooltip: {
                        valueSuffix: this.dataTypeArr.find(type => type.value == data_type).valueSuffix
                    },
                    series: [{
                        name: this.getType(data_type),
                        color: '#F4B342',
		                data: res.data.sign_up || []
                    }]
                }
            })
            // 预约试驾
            const datas10 = { ...datas }
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=testDriveStatistic', { params: datas10 })
            .then(res => {
                if(res.code == 1) {
                    const data_type = 9
                    const type1 = this.getType(data_type, "", 1)
                    const type2 = this.getType(data_type, "", 2)
                    this.dataArr10 = {
                        series: [
                            {
                                name: type1.label,
                                color: '#1890FF',
                                tooltip: {
                                    valueSuffix: type1.valueSuffix
                                },
		                        data: res.data.appoint || []
                            },
                            {
                                name: type2.label,
                                color: '#68BBC4',
                                tooltip: {
                                    valueSuffix: type2.valueSuffix
                                },
		                        data: res.data.arrive || []
                            }
                        ]
                    }
                } else {
                    this.$message.error(res.msg);
                }
            })
            // 售后团购
            const datas9 = {...datas, data_type: 4}
            this.handleRequest1(datas9, res => {
                const data_type = 8
                this.dataArr9 = {
                    tooltip: {
                        valueSuffix: this.dataTypeArr.find(type => type.value == data_type).valueSuffix
                    },
                    series: [{
                        name: this.getType(data_type),
                        color: '#1890FF',
		                data: res.data.sign_up || []
                    }]
                }
            })
            // 特价车
            const datas3 = {...datas, data_type: 3}
            this.handleRequest1(datas3, res => {
                const data_type = 3
                this.dataArr3 = Object.assign(this.dataArr3, {
                    valueSuffix: this.dataTypeArr.find(type => type.value == data_type).valueSuffix,
                    series: [{
                        name: this.getType(data_type),
		                data: res.data.sign_up || []
                    }]
                })
            })
            // 二手车评估
            const datas4 = {...datas, data_type: 2}
            this.handleRequest2(datas4, res => {
                const data_type = 4
                this.dataArr4 = Object.assign(this.dataArr4, {
                    valueSuffix: this.dataTypeArr.find(type => type.value == data_type).valueSuffix,
                    series: [{
                        name: this.getType(data_type),
		                data: res.data || []
                    }]
                })
            })
            // 底价咨询
            const datas5 = {...datas, data_type: 1}
            this.handleRequest1(datas5, res => {
                const data_type = 5
                this.dataArr5 = {
                    tooltip: {
                        valueSuffix: this.dataTypeArr.find(type => type.value == data_type).valueSuffix
                    },
                    series: [{
                        name: this.getType(data_type),
                        color: '#FF8888',
		                data: res.data.sign_up || []
                    }]
                }
            })
            // 救援发起
            const datas6 = {...datas, data_type: 3}
            this.handleRequest2(datas6, res => {
                const data_type = 6
                this.dataArr6 = {
                    tooltip: {
                        valueSuffix: this.dataTypeArr.find(type => type.value == data_type).valueSuffix
                    },
                    series: [{
                        name: this.getType(data_type),
                        color: '#47ECC0',
		                data: res.data || []
                    }]
                }
            })
            // 商城订单 - 兑换量
            const datas7 = {...datas, data_type: 4}
            this.handleRequest2(datas7, res => {
                const data_type = 7
                res.data.reverse()
                this.dataArr7 = Object.assign(this.dataArr7, {
                    valueSuffix: this.dataTypeArr.find(type => type.value == data_type).valueSuffix['s4'],
                    series: [{
                        name: this.dataTypeArr.filter(item => item.value == data_type)[0].labels['s4'],
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, 'rgb(92, 175, 52, 0.4)'],
                                [1, '#5CAF34']
                            ],
                        },
		                data: res.data || []
                    }]
                })
                // 计算总值
                this.dataArr7.total = this.dataArr7.series[0].data.reduce((sum, item) => {
                    return sum + item[1];
                }, 0) || 0;
            })
            // 商城订单 - 累计金额
            const datas8 = {...datas, data_type: 5}
            delete datas8.is_accumulate
            this.handleRequest3(datas8, res => {
                const data_type = 7
                this.dataArr8 = {
                    tooltip: {
                        valueSuffix: this.dataTypeArr.find(type => type.value == data_type).valueSuffix['s5']
                    },
                    series: [{
                        name: this.dataTypeArr.filter(item => item.value == data_type)[0].labels['s5'],
                        color: '#5CAF34',
		                data: res.data || []
                    }]
                }
                getChartMin(res.data, this.dataArr8)
            })
            // 救援评价
            const datas11 = { ...datas }
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=rescueEvaluation', { params: datas11 })
            .then(res => {
                if(res.code == 1) {
                    const data_type = 10
                    const type1 = this.getType(data_type, "", 1)
                    const type2 = this.getType(data_type, "", 2)
                    this.dataArr11.series = [
                        {
                            name: type1.label,
                            linecolor: '#47ECC0',
                            color: {
                                linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                                stops: [
                                    [0, 'rgb(71, 236, 192, 0.4)'],
                                    [1, '#47ECC0']
                                ]
                            },
                            tooltip: {
                                valueSuffix: type1.valueSuffix
                            },
		                    data: res.data.page_view || []
                        },
                        {
                            name: type2.label,
                            linecolor: '#1890FF',
                            color: {
                                linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                                stops: [
                                    [0, 'rgb(24, 144, 255, 0.4)'],
                                    [1, '#1890FF']
                                ]
                            },
                            tooltip: {
                                valueSuffix: type2.valueSuffix
                            },
		                    data: res.data.evaluation || []
                        }
                    ]
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        handleRadioChange(val) {
            // 重新赋值，让图表在类型切换时出现加载动画
            if(val == 4) this.dataArr7.series = [...this.dataArr7.series]
            else if(val == 5) this.dataArr8.series = [...this.dataArr8.series]
        },
        handleRequest1(params, cb = null) {
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=signUpStatistic', {params})
            .then(res => {
                if(res.code == 1) {
                    typeof cb == 'function' && cb(res)
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        handleRequest2(params, cb = null) {
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=estimateStatistic', {params})
            .then(res => {
                if(res.code == 1) {
                    typeof cb == 'function' && cb(res)
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        handleRequest3(params, cb = null) {
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=pointsOrderAccumulateAmountStatistics', {params})
            .then(res => {
                if(res.code == 1) {
                    typeof cb == 'function' && cb(res)
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        getType(data_type, key = "label", value) {
            const type = this.dataTypeArr.filter(item => item.value == data_type)[0]
            if (!value) {
                if (key) {
                    return type[key]
                }
                return type
            } else if (type.children) {
                const subType = type.children.filter(item2 => item2.value === value)[0]
                if (key) {
                    return subType[key]
                }
                return subType
            }
        }
    }
}
</script>
<style scoped lang="scss">
    @import url('~@/common/scss/charts-public.scss');
    .type-radio-group {
        margin-right: 12px;
    }
    .container-box {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        position: relative;
        .charts-date-type {
            position: absolute;
            right: 0;
            top: -38px;
            z-index: 99;
        }
        .charts-container {
            box-shadow: none;
            width: calc(100% + 10px);
            height: 100%;
            margin: 0 -5px;
            padding-right: 3px;
            padding-bottom: 15px;
            >.el-row {
                height: 340px;
                >.el-col {
                    height: 100%;
                    .charts-box {
                         height: calc(100% - 15px);
                    }
                    &:first-child{padding-right: 3px;}
                    &:last-child{padding-left: 3px;}
                }
            }
        }
        .charts-box {
            background: #fff;
            box-shadow: 0px 0px 10px #ddd;
            box-sizing: border-box;
            margin: 15px 5px;
            position: relative;
            overflow: hidden;
            .charts-header {
                height: 48px;
                padding: 0 15px 4px;
                border: none;
                position: relative;
                > .charts-more {
                    position: absolute;
                    top: 12px;
                    right: 20px;
                    color: #1E7DF2;
                }
                
            }
            /deep/ .charts-content  {
                padding: 0 14px;
                height: 97%;
                &.charts-bar {
                    height: calc(97% - 10px)
                }
                .chart-search {
                    display: none!important;
                }
                &.vis1 { 
                    display: none; 
                    &.visible { display: block; }
                }
            }
        }
    }
    .charts-radio-group /deep/ {
        position: absolute;
        right: 60px;
        top: 8px;
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
            background: none;
            border: none;
            border-color: #DCDFE6;
            color:#1E7DF2;
            box-shadow: none;
        }
        .el-radio-button__inner {
            background: none;
            border: none;
            color: #888;
            padding: 9px;
            font-size: 12px;
        }
        .el-radio-button:first-child .el-radio-button__inner {
            border: none;
        }
        .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
            box-shadow: none;
        }
    }
</style>